<template>
  <div class="map-home" @click.self="blackClick">
    <div class="select_screen d-start">
      <span>项目状态:</span>
      <el-cascader
        :options="xmstate"
        size="small"
        :props="prop1"
        v-model="formField.xmzt"
        collapse-tags
        style="width:150px;"
        @visible-change="elCascaderOnlick"
        @expand-change="elCascaderOnlick"
        clearable
      ></el-cascader>
      <!-- @visible-change="getData" -->
      <span>行政区划:</span>
      <el-cascader
        size="small"
        :options="cityList"
        :props="props"
        v-model="selectleap"
        popper-class="citylist"
        style="width:250px;"
        ref="elcascader"
        collapse-tags
        clearable
        @change="handleChange"
        @visible-change="elCascaderOnlick"
        @expand-change="elCascaderOnlick"
      >
        <template slot-scope="{ data }">
          <span>{{ data.name }}</span>
        </template>
      </el-cascader>
      <!-- <select-box :citylist="cityList" /> -->
      <span>行政等级:</span>
      <el-cascader
        :options="xmLevel"
        size="small"
        :props="prop1"
        style="width:150px;"
        collapse-tags
        clearable
        v-model="formField.xzdj"
        @visible-change="elCascaderOnlick"
        @expand-change="elCascaderOnlick"
      ></el-cascader>
      <!-- @visible-change="getData" -->
      <span>路面类型:</span>
      <el-cascader
        :options="lmstate"
        size="small"
        :props="prop1"
        style="width:180px;"
        collapse-tags
        clearable
        v-model="formField.lmlx"
        @visible-change="elCascaderOnlick"
        @expand-change="elCascaderOnlick"
      ></el-cascader>
      <!-- @visible-change="getData" -->
    </div>
    <div class="viewDiv2" id="viewDiv2"></div>
    <div class="right_pop">
      <div class="top_">
        <div class="_blue"></div>
        <div class="_white"></div>
        <div class="_center d-center">
          <div class="data_tab">
            <div
              style="color:rgba(35,138,245,1);"
              class="justy"
              :title="tableData.zlc + 'km'"
            >{{tableData.zlc || 0}}</div>
            <div>建设里程(km)</div>
          </div>
          <div class="data_tab">
            <div style="color:rgba(255,156,0,1);">{{tableData.xmgs || 0}}</div>
            <div>项目个数(个)</div>
          </div>
          <div class="data_tab">
            <div
              :title="tableData.gsze + '万元'"
              style="color:rgba(37,184,61,1);"
              class="justy"
            >{{ztz || 0}}</div>
            <div>概算投资规模({{money}}元)</div>
          </div>
        </div>
      </div>
      <div class="tab">
        <span :class="{active:isactive == 1}" @click="isactive = 1">行政区划</span>
        <span :class="{active:isactive == 2}" @click="isactive = 2">项目状态</span>
        <span :class="{active:isactive == 3}" @click="isactive = 3;initEcharts()">技术等级</span>
        <span :class="{active:isactive == 4}" @click="isactive = 4;initEcharts()">行政等级</span>
      </div>
      <div class="main-home" v-show="isactive == 1">
        <div class="title">
          <i></i>
          <span>项目数(个)</span>
        </div>
        <div class="main-charts">
          <div class="lines one" v-for="item in cityTable" :key="item.adcode">
            <span @click="getindex(item.name,1)">{{item.name}}</span>
            <div class="progress">
              <el-progress :percentage="item.project || 0" :stroke-width="16" :format="format"></el-progress>
            </div>
          </div>
        </div>
      </div>
      <div class="main-home" v-show="isactive == 2">
        <div class="title">
          <i style="background:linear-gradient(90deg,rgba(72,209,95,1) 0%,rgba(3,184,33,1) 100%);"></i>
          <span style="color:rgba(37,184,61,1);margin-right:10px;">概算投资（万元）</span>
          <i></i>
          <span style="color:rgba(2,154,255,1);">建设里程（km）</span>
        </div>
        <div class="main-charts">
          <div class="lines d-between two" v-for="item in xmztTable" :key="item.id">
            <div class="left-t d-between">
              <span @click="getindex(item.keys,2)">{{item.keys}}</span>
              <i>
                <img src="@/assets/img/home-left.png" alt />
              </i>
            </div>
            <div class="progress">
              <el-progress
                :percentage="item.gsze || 0"
                :color="'rgb(37, 184, 61)'"
                :stroke-width="13"
                :format="format1"
                class="progress-green"
              ></el-progress>
              <el-progress
                style="margin-top:10px;"
                :percentage="item.zlc || 0"
                :stroke-width="13"
                :format="format2"
              ></el-progress>
            </div>
          </div>
        </div>
      </div>
      <div class="main-home" v-show="isactive == 3">
        <div class="first-echart" ref="ref1"></div>
        <span style="font-size:12px;padding:12px;">技术等级(km)</span>
        <div class="second-echart" ref="ref2"></div>
      </div>
      <div class="main-home" v-show="isactive == 4">
        <div class="three-echart d-between">
          <div class="one" v-for="(item,index) in xzdjTable.label" :key="index">
            <div class="a">{{item}}</div>
            <el-progress
              :percentage="(xzdjTable.datas[0]+xzdjTable.datas[1]+xzdjTable.datas[2])?parseFloat((xzdjTable.datas[index]/(xzdjTable.datas[0]+xzdjTable.datas[1]+xzdjTable.datas[2])*100).toFixed(2)):0"
              :stroke-width="13"
              type="dashboard"
            ></el-progress>
          </div>
        </div>
        <div class="four-echart" ref="ref3"></div>
      </div>
    </div>
    <lotDialog
      :dialogFormVisible1="dialogFormVisible1"
      @close="close1"
      :item="item"
      :inner="inner"
      :Xscode="Xscode"
      :xmmc="xmmc"
    />
  </div>
</template>

<script>
import { loadCss, loadModules } from "esri-loader";
import { debounce } from "@/plugins/common";
import lotDialog from "./dialog/lotDialog.vue";
// import selectBox from "./dialog/selectBox.vue";
export default {
  name: "homeMap",
  components: {
    lotDialog,
    // selectBox
  },
  data() {
    return {
      dialogFormVisible: false,
      dialogFormVisible1: false,
      isactive: 1,
      gisConstructor: {}, //gis 构造函数
      gisInstance: {}, // gis 实例
      layersInstance: {},
      UIInstance: {},
      gisModules: [
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/MapImageLayer",
        "esri/layers/TileLayer",
        "esri/layers/FeatureLayer",
        "esri/widgets/LayerList",
        "esri/widgets/AreaMeasurement2D",
        "esri/widgets/DistanceMeasurement2D",
        "esri/widgets/Zoom",
        "esri/widgets/Zoom/ZoomViewModel",
        "esri/geometry/Point",
        "esri/Graphic",
        "esri/tasks/QueryTask",
        "esri/tasks/support/Query",
        "esri/geometry/SpatialReference",
        "esri/geometry/Extent",
        "esri/symbols/TextSymbol",
        "esri/symbols/PictureMarkerSymbol",
        "esri/Color",
        "esri/symbols/Font",
        "esri/tasks/IdentifyTask",
        "esri/tasks/support/IdentifyParameters",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch/SketchViewModel",
        "esri/views/2d/draw/Draw",
        "esri/geometry/Polygon",
        "esri/core/watchUtils",
        "esri/core/urlUtils",
        "esri/identity/IdentityManager",
        "esri/identity/ServerInfo",
        "esri/widgets/Legend",
        "esri/geometry/support/webMercatorUtils",
      ],
      options: {
        url: "https://js.arcgis.com/4.15/",
        // url: this.$jsApi + "arcgis_js_api/library/4.14/init.js"
      },
      layerUrl: this.$map + "arcgis/rest/services/Gis2013_PROJ_LD/MapServer/",
      bgUrl: this.$map + "arcgis/rest/services/BeiJingProj/MapServer/",
      xmmc: "",
      items: null,
      resultData: null,
      img3: require("../../assets/img/infobox-close.png"),
      img4: require("../../assets/img/ic_location_blue.png"),
      img5: require("../../assets/img/ic_info.png"),
      xm_id: null,
      item: {},
      inner: [],
      Xscode: [],
      xmstate: [],
      lmstate: [],

      xmLevel: [
        {
          values: "国道",
        },
        {
          values: "省道",
        },
        {
          values: "林下经济路",
        },
      ],
      cityList: [],
      District: [], //区县
      selectleap: [],
      props: {
        lazy: true,
        lazyLoad: this.lazyLoad,
        label: "name",
        value: "name",
        multiple: true,
        checkStrictly: true,
      },
      gcdd_sj: null,
      gcdd_qx: null,
      formField: {
        xmzt: [],
        lmlx: [],
        xzdj: [],
      },
      prop1: { multiple: true, label: "values", value: "values" },
      tableData: {},
      cityTable: [],
      xmztTable: [],
      jsdjTable: [],
      xzdjTable: [],
      money: "万",
      maxCity: 0,
      maxXmztZlc: 0,
      maxXmztGsze: 0,
      echarts1: null,
      echarts2: null,
      echarts3: null,
      echarts4: null,
      level1: "",
      mapReady: false,
    };
  },
  mounted() {
    this.$get("/api/index/codes", { pid: 1 }).then((res) => {
      if (res.code == 200 && res.data) {
        this.xmstate = res.data.list;
      }
    });
    this.$get("/api/index/codes", { pid: 31 }).then((res) => {
      if (res.code == 200 && res.data) {
        this.lmstate = res.data.list;
      }
    });
    this.$get("api/project/getCitys").then((res) => {
      if (res.code == 200 && res.data) {
        this.cityList = res.data;
        // console.log(this.cityList);
      }
    });
    this.$get("/api/index/codes", { pid: 17 }).then((res) => {
      if (res.code == 200 && res.data) {
        this.inner = res.data.list;
      }
    });
    this.$get("/api/index/codes", { pid: 25 }).then((res) => {
      if (res.code == 200 && res.data) {
        this.Xscode = res.data.list;
      }
    });
    // this.initHome()
    this.search();
    // console.log(1);
    this.$Bus.$on("refresh", () => {
      //项目库数据改变触发
      this.search();
    });
    this.init();
    let that = this;
    window.closePop = function () {
      that.gisInstance.view.graphics.items = that.gisInstance.view.graphics.items.filter(
        (v) => {
          return !("attr" in v);
        }
      );
      var dom = document.querySelectorAll(".pulse");
      if (dom.length > 0) {
        dom.forEach((v) => {
          v.remove();
        });
      }
      var div = document.querySelectorAll(".poptemplate");
      if (div.length > 0) {
        div.forEach((v) => {
          v.remove();
        });
      }
    };
    window.showForm = function () {
      that.dialogFormVisible1 = true;
    };
    // this.$Bus.$on("initHome", this.initHome);
  },
  methods: {
    getindex(name, status) {
      if (status == 1) {
        this.gcdd_sj = name;
        this.selectleap = [name];
        this.search();
      }
      if(status == 2){
        this.formField.xmzt = [name]
      }
    },
    initEcharts() {
      if (this.isactive == 3) {
        this.$nextTick(() => {
          this.echarts1 = this.$echarts.init(this.$refs.ref1);
          this.echarts2 = this.$echarts.init(this.$refs.ref2);
          this.echarts1.setOption(this.option1());
          this.echarts2.setOption(this.option2());
          // this.echarts1.resize();
        });
      }
      if (this.isactive == 4) {
        this.$nextTick(() => {
          this.echarts3 = this.$echarts.init(this.$refs.ref3);
          this.echarts3.setOption(this.option3());
        });
      }
    },
    option1() {
      var option = {
        tooltip: {
          trigger: "item",

          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: [
          {
            bottom: 10,
            data: this.jsdjTable.label,
            textStyle: {
              color: "#00D9D5",
            },
          },
        ],
        calculable: true,
        series: [
          {
            name: "道路占比",
            type: "pie",
            radius: ["40%", "55%"],
            // center: ["50%", "35%"],
            // roseType: "area",
            // roseType: 'radius',
            label: {
              normal: {
                show: true,
                formatter: "{d}%",
              },
            },
            data: this.jsdjTable.datas,
            color: [
              "rgb(45, 102, 254)",
              "rgb(33, 202, 168)",
              "rgb(241, 102, 101)",
              "rgb(252, 192, 46)",
              "rgb(118, 196, 94)",
            ],
          },
        ],
      };
      return option;
    },
    option2() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{b} : {c} km",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
        },
        xAxis: {
          type: "category",
          data: this.jsdjTable.label,
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              color: "#2ec7c9",
            },
            label: {
              show: true,
              position: "inside",
            },
            data: this.jsdjTable.datas,
          },
        ],
      };
    },
    option3() {
      return {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: "{b} : {c} km",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "5%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
        },
        xAxis: {
          type: "category",
          data: this.xzdjTable.label,
        },
        series: [
          {
            type: "bar",
            itemStyle: {
              color: "#2ec7c9",
            },
            label: {
              show: true,
              position: "inside",
            },
            data: this.xzdjTable.datas,
          },
        ],
      };
    },
    format(percentage) {
      // console.log(percentage);
      return Math.round((percentage / 100) * this.maxCity);
    },
    format1(percentage) {
      // console.log(percentage);
      return parseFloat(((percentage / 100) * this.maxXmztGsze).toFixed(4));
    },
    format2(percentage) {
      // console.log(percentage);
      return parseFloat(((percentage / 100) * this.maxXmztZlc).toFixed(4));
    },
    // getData(value) {
    //   if (!value) {
    //     this.search();
    //   }
    // },
    search: debounce(function () {

      let form = {};
      // this.cityTable = [];
      for (let k in this.formField) {
        form[k] = this.formField[k].join(",");
      }
      form.gcdd_sj = this.gcdd_sj;
      form.gcdd_qx = this.gcdd_qx;

      // form
      if (this.selectleap.length == 0) {
        form.gcdd_sj = null;
        form.gcdd_qx = null;
      }
      // if (this.selectleap.slice(1).length == 0) {
      //   form.gcdd_qx = null;
      // }
      this.$get("api/index/getIndex", form).then((res) => {
        if (res.code == 200 && res.data) {
          this.tableData = res.data;
          this.xmztTable = res.data.xmzt;
          this.jsdjTable = res.data.jsdj;
          this.xzdjTable = res.data.xzdj;

          let maxCity = Math.max(
            ...res.data.citys.map((v) => {
              return v.project;
            })
          );
          let maxXmztGsze = Math.max(
            ...res.data.xmzt.map((v) => {
              return v.gsze;
            })
          );
          let maxXmztZlc = Math.max(
            ...res.data.xmzt.map((v) => {
              return v.zlc;
            })
          );
          let dataJsdj = this.jsdjTable.datas.map((v, index) => {
            return { name: this.jsdjTable.label[index], value: v };
          });
          this.jsdjTable.datas = dataJsdj;
          this.maxCity = maxCity;
          this.maxXmztGsze = maxXmztGsze || 0;
          this.maxXmztZlc = maxXmztZlc || 0;
          // console.log(maxCity);
          res.data.citys.forEach((v) => {
            v.project = (v.project / maxCity) * 100;
          });
          res.data.xmzt.forEach((v) => {
            v.gsze = (v.gsze / maxXmztGsze) * 100;
            v.zlc = (v.zlc / maxXmztZlc) * 100;
          });
          this.cityTable = res.data.citys;
          this.xmztTable = res.data.xmzt;

          if (res.data.gsze > 10000) {
            this.money = "亿";
          } else {
            this.money = "万";
          }
          if (this.mapReady) {
            this.$get("api/index/getProjectLines", {
              project_id: this.tableData.projectlistids,
            }).then((res) => {
              if (res.code == 200) {
                this.local(res.data);
              }
            });
          }
          // console.log(this.cityTable)
          // console.log(this.tableData.xmgs);
          this.initEcharts();
          this.$nextTick(() => {
            this.$forceUpdate();
          });
        }
      });
    }, 500),
    handleChange: function () {
      const checkedNodes = this.$refs["elcascader"].getCheckedNodes();
      let checkedNodes_new = checkedNodes.filter((v) => {
        return v.level == 1;
      });
      if (checkedNodes_new.length <= 1) {
        checkedNodes_new.forEach((v) => {
          if (v.level == 1) {
            this.level1 = v.value;
          }
        });
      } else {
        // console.log(this.level1);
        let newss = checkedNodes_new.filter((v) => {
          return v.value != this.level1;
        });
        this.level1 = newss[0] ? newss[0].value : null;
        this.selectleap = [newss[0].value];
      }
      this.gcdd_sj = this.level1;
      // this.selectleap[0][0] = this.level1;
      // console.log(this.selectleap)
      let a = this.selectleap
        .slice(1)
        .map((v) => {
          return v[1];
        })
        .join(",");
      // console.log(a);
      // console.log(1);
      this.gcdd_qx = a;

      // this.search();
    },
    elCascaderOnlick() {
      // let that = this;
      setTimeout(function () {
        document.querySelectorAll(".el-cascader-node__label").forEach((el) => {
          el.onclick = function () {
            this.previousElementSibling.click();
            // that.$refs.elcascader.dropDownVisible = false;
          };
        });

        // document
        //   .querySelectorAll(".el-cascader-panel .el-radio")
        //   .forEach(el => {
        //     el.onclick = function() {
        //       // that.$refs.elcascader.dropDownVisible = false;
        //     };
        //   });
      }, 100);
    },
    lazyLoad(node, resolve) {
      // console.log(node);
      if (node.level == 1) {
        //编辑或查看时获取县的数据

        this.$get("api/project/getDistrict", { code: node.data.adcode }).then(
          (res) => {
            if (res.code == 200 && res.data) {
              this.District = res.data;
              this.District.map((v) => {
                return (v.leaf = node.level >= 1);
              });
              let selectleap = this.selectleap;
              resolve(res.data);
              this.$nextTick(() => {
                this.selectleap = selectleap;
              });
              // this.elCascaderOnlick();
            }
          }
        );
      } else {
        resolve(null);
      }
    },
    close1() {
      this.dialogFormVisible1 = false;
    },
    blackClick() {
      this.gisInstance.view.graphics.removeAll();
      this.dialogFormVisible = false;
    },
    local(resultData) {
      let centerOut;
      this.gisInstance.view.graphics.removeAll();
      if (!resultData.length) return;
      // console.log(resultData);
      resultData.forEach((v) => {
        let line = v.lines;
        let xmzt = v.project.xmzt;
        // console.log(v.project.xmzt);
        // var pc = line.paths[0];
        var start = line[0]; //起点坐标
        var end = line[line.length - 1]; //止点坐标
        var center; //中心点坐标
        var arrowStartIndex, arrowEndIndex;

        if (line.length % 2 == 0) {
          arrowEndIndex = Math.round(line.length / 2);
          arrowStartIndex = Math.round(line.length / 2 - 1);
          var extent = new this.gisConstructor.Extent(
            line[arrowStartIndex][0],
            line[arrowStartIndex][1],
            line[arrowEndIndex][0],
            line[arrowEndIndex][1],
            new this.gisConstructor.SpatialReference({ wkid: 3857 })
          );
          center = [extent.center.x, extent.center.y];
        } else {
          arrowEndIndex = Math.round(line.length / 2 + 1);
          arrowStartIndex = Math.round(line.length / 2 - 1);
          center = line[Math.round(line.length / 2)];
        }

        var startPoint = {
          geometry: {
            type: "point",
            x: start[0],
            y: start[1],
            spatialReference: { wkid: 3857 },
          },
          symbol: {
            color: [255, 0, 0],
            size: 10,
            type: "simple-marker",
          },
        };

        var endPoint = {
          geometry: {
            type: "point",
            x: end[0],
            y: end[1],
            spatialReference: { wkid: 3857 },
          },
          symbol: {
            color: [0, 128, 0],
            size: 10,
            type: "simple-marker",
          },
        };
        let color = "black";
        if (xmzt == "交工") {
          color = "#FE8E16";
        }
        if (xmzt == "新建") {
          color = "#3CC24C";
        }
        if (xmzt == "续建") {
          color = "#EE4B47";
        }
        if (xmzt == "竣工") {
          color = "#4A8DFC";
        }
        var lineGraphic = {
          geometry: {
            type: "polyline",
            paths: [line],
            spatialReference: { wkid: 3857 },
          },
          symbol: {
            type: "simple-line",
            color: color,
            width: 4,
          },
          attributes: {
            bd_id: v.bd_Id,
            x: center[0],
            y: center[1],
            project: v.project,
            bd: v.bd,
          },
        };

        lineGraphic.geometry = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
          lineGraphic.geometry
        );

        startPoint.geometry = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
          startPoint.geometry
        );

        endPoint.geometry = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
          endPoint.geometry
        );

        var gStart = new this.gisConstructor.Graphic(startPoint);
        var gEnd = new this.gisConstructor.Graphic(endPoint);
        var graphic = new this.gisConstructor.Graphic(lineGraphic);

        this.gisInstance.view.graphics.add(graphic);
        this.gisInstance.view.graphics.add(gStart);
        this.gisInstance.view.graphics.add(gEnd);
        centerOut = center;
      });

      this.gisInstance.point = new this.gisConstructor.Point({
        longitude: centerOut[0],
        latitude: centerOut[1],
      });
      // this.gisInstance.view.goTo({
      //   target: this.gisInstance.point,
      //   zoom: 5,
      //   speedFactor: 6,
      //   easing: "linear"
      // });
    },
    init() {
      let url = "http://121.89.201.182:6080/";
      loadCss("https://js.arcgis.com/4.15/esri/themes/light/main.css");
      loadModules(this.gisModules, this.options).then((res) => {
        for (var i in res) {
          var name = this.gisModules[i].split("/").pop();
          this.gisConstructor[name] = res[i];
        }
        //获取Token
        var serverInfo = this.gisConstructor.ServerInfo();
        var identityManager = this.gisConstructor.IdentityManager;

        serverInfo.serverString = url + "arcgis/rest/services"; //这里配置ArcGIS Server的REST服务地址
        serverInfo.tokenServiceUrl = url + "arcgis/tokens/generateToken"; //由于GIS Server和Portal联合了，所以使用Portal的token生成地址
        var userInfo = { username: "zzUser", password: "gis_1234" }; //这里填写Portal的用户和密码
        identityManager.generateToken(serverInfo, userInfo).then(
          (data) => {
            // This is called when the promise resolves
            var tokenValue = data.token;
            this.token = data.token;
            //注册Token，注册之后，在Portal里的所有资源，只要该用户由权限访问，就可以直接使用，之前的所有安全服务请求都将会把token值作为参数发送到服务器端
            identityManager.registerToken({
              server: url + "arcgis/rest/services",
              token: tokenValue,
            });
            loadModules(this.gisModules, this.options).then(this.loadMap);
          },
          function (error) {
            // This function is called when the promise is rejected
            console.log(error); // Logs the error message
          }
        );
      });
    },
    //初始化地图
    loadMap(res) {
      for (var i in res) {
        var name = this.gisModules[i].split("/").pop();
        this.gisConstructor[name] = res[i];
      }
      // this.gisConstructor.urlUtils.addProxyRule({
      //   urlPrefix: this.$map, //配置文件proxy.config中的地址,要请求的地址
      //   proxyUrl: this.$proxy + "/DotNet/proxy.ashx", //部署的代理文件地址
      // });
      this.layersInstance.bgLayer = new this.gisConstructor.TileLayer({
        url: this.bgUrl,
      });
      this.layersInstance.layer = new this.gisConstructor.MapImageLayer({
        url: this.layerUrl,
      });

      this.gisInstance.map = new this.gisConstructor.Map({
        spatialReference: {
          wkid: 3857,
        },
      });

      this.gisInstance.view = new this.gisConstructor.MapView({
        container: "viewDiv2",
        spatialReference: {
          wkid: 3857,
        },
        center: [130.63, 47.75],
        constraints: {
          rotationEnabled: false, //禁止旋转
        },
        zoom: 2,
        map: this.gisInstance.map,
      });

      this.gisInstance.map.add(this.layersInstance.bgLayer);
      this.gisInstance.map.add(this.layersInstance.layer);

      //======================================
      this.UIInstance.zoom = new this.gisConstructor.Zoom({
        viewModel: {
          view: this.gisInstance.view,
        },
      });

      this.UIshow();
      // this.popupMap();
      this.gisInstance.view.when(this.pointerUpLocation);
    },
    UIshow() {
      this.gisInstance.view.ui.remove("attribution"); //移除底部ESRI logo
      this.gisInstance.view.ui._removeComponents(["zoom"]); //移除默认ui
    },
    pointerUpLocation() {
      this.gisInstance.view.on("click", (event) => {
        this.gisInstance.view.hitTest(event).then(this.popup);
      });
      this.mapReady = true;
      this.$get("api/index/getProjectLines", {
        project_id: this.tableData.projectlistids,
      }).then((res) => {
        if (res.code == 200) {
          this.local(res.data);
        }
      });
      this.gisConstructor.watchUtils.when(
        this.gisInstance.view,
        "extent",
        this.animation
      );
      this.gisConstructor.watchUtils.when(
        this.gisInstance.view,
        "extent",
        this.poptemplate
      );
      this.items = this.gisInstance.view.graphics.items;
    },
    popup(response) {
      let that = this;
      if (response.results.length) {
        let results = response.results;
        let result = results.filter((v) => {
          return v.graphic.geometry.type == "polyline";
        });
        if (!result.length) return;
        let center = result[0].graphic.attributes;
        this.gisInstance.view.graphics.items = this.gisInstance.view.graphics.items.filter(
          (v) => {
            return !("attr" in v);
          }
        );
        var dom = document.querySelectorAll(".pulse");
        if (dom.length > 0) {
          dom.forEach((v) => {
            v.remove();
          });
        }
        var div = document.querySelectorAll(".poptemplate");
        if (div.length > 0) {
          div.forEach((v) => {
            v.remove();
          });
        }
        this.xmmc = center.project.xmmc;
        let bd_id = result[0].graphic.attributes.bd_id;
        that
          .$get("/api/QqBdgl/one", {
            bd_id: bd_id,
          })
          .then((res) => {
            let data = res.data;
            this.item = res.data;
            let result = {
              xmmc: this.xmmc,
              bdmc: res.data.bdmc,
              zbj: res.data.zbj,
              bd_id: bd_id,
            };
            let reqs = [];
            reqs.push(
              this.$get("/api/enterprise/getInfo", { id: data.zbdw_id }).then(
                (res1) => {
                  result.zbdw = res1.data.dwmc;
                }
              )
            );
            reqs.push(
              this.$get("/api/project/getUserIds", { id: data.xmjl_id }).then(
                (res2) => {
                  result.xmjl_xm = res2.data[0].xm;
                  result.xmjl_lxdh = res2.data[0].lxdh;
                }
              )
            );
            reqs.push(
              this.$get("/api/QqHtgl/getHtListByDbId", {
                bd_id: bd_id,
              }).then((res3) => {
                result.htje = res3.data[0].ht_je;
              })
            );
            Promise.all(reqs)
              .then(() => {
                var popPoint = {
                  geometry: {
                    type: "point",
                    x: center.x,
                    y: center.y,
                  },
                  symbol: {
                    color: "rgba(255,255,255,0)",
                    size: 0,
                    type: "simple-marker",
                  },
                };
                popPoint.geometry = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
                  popPoint.geometry
                );
                var popGraphic = new this.gisConstructor.Graphic(popPoint);
                popGraphic.pop = {
                  x: center.x,
                  y: center.y,
                };
                popGraphic.attr = {
                  x: center.x,
                  y: center.y,
                };
                this.gisInstance.view.graphics.add(popGraphic);
                let title = this.createTitle("BD", result);
                this.poptemplate(title);
                this.animation();
              })
              .catch(() => {
                var popPoint = {
                  geometry: {
                    type: "point",
                    x: center.x,
                    y: center.y,
                  },
                  symbol: {
                    color: "rgba(255,255,255,0)",
                    size: 0,
                    type: "simple-marker",
                  },
                };
                popPoint.geometry = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
                  popPoint.geometry
                );
                var popGraphic = new this.gisConstructor.Graphic(popPoint);
                popGraphic.pop = {
                  x: center.x,
                  y: center.y,
                };
                popGraphic.attr = {
                  x: center.x,
                  y: center.y,
                };
                this.gisInstance.view.graphics.add(popGraphic);
                let title = this.createTitle("BD", result);
                this.poptemplate(title);
                this.animation();
              });
          });
      }
    },
    createTitle(type, graphic) {
      var title = "";
      if (type == "BD") {
        title = `<div style='height:100%; width:100%;' class='popup_select' >
                          <div class="header">
                           <div class="hang">${graphic["xmmc"]}</div>
                               <i  onclick="closePop()" >
                                <img src="${this.img3}" alt="">
                                </i>
                           </div>
                           <div class="center">
                               <div class="hang">
                               <span>标段名称 : </span>
                               <span>${graphic["bdmc"] || "暂无数据"} </span>
                               </div>
                               <div class="hang">
                               <span>中标价 : </span>
                               <span>${graphic["zbj"] || "暂无数据"} 万元</span>
                               </div>
                               <div class="hang">
                               <span>合同金额 : </span>
                               <span>${
                                 graphic["htje"] || "暂无数据"
                               } 万元</span>
                               </div>
                               <div class="hang">
                               <span>中标单位 :</span>
                               <span>${graphic["zbdw"] || "暂无数据"} </span>
                               </div>
                               <div class="hang">
                               <span>项目经理及联系方式 : </span>
                               <span>${graphic["xmjl_xm"] || "暂无数据"}-${
          graphic["xmjl_lxdh"] || "暂无数据"
        } </span>
                               </div>
                           </div>
                           <div class="fotter">
                                 <span onclick="showForm('${
                                   graphic["bd_id"]
                                 }')">
                                <i>
                                  <img src="${this.img5}" alt="">
                                </i>
                                查看详情
                              </span>
                          </div>
                          </div>`;
      }
      return title;
    },
    //点击添加点动画
    animation() {
      if (this.gisInstance.view.graphics.items.length > 0) {
        this.gisInstance.view.graphics.items.forEach((v) => {
          if ("attr" in v) {
            var xx = v.attr.x;
            var yy = v.attr.y;
            var dom = document.getElementById("point" + v.uid + "");
            let pointAll = {
              x: xx,
              y: yy,
              spatialReference: {
                wkid: 3857,
              },
            };
            pointAll = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
              pointAll
            );
            var point1 = this.gisInstance.view.toScreen(
              new this.gisConstructor.Point(pointAll)
            );
            var { x, y } = point1;
            if (!dom) {
              dom = document.createElement("div");
              dom.className = "pulse";
              dom.id = "point" + v.uid;
              document.getElementById("viewDiv2").appendChild(dom);
            }
            dom.style = `left:${x - 10}px;top:${y - 10}px`;
          }
        });
      }
    },
    poptemplate(value) {
      if (this.gisInstance.view.graphics.items.length > 0) {
        this.gisInstance.view.graphics.items.forEach((v) => {
          if ("pop" in v) {
            var xx = v.pop.x;
            var yy = v.pop.y;
            var div = document.getElementById("pop" + v.uid + "");
            let pointAll = {
              x: xx,
              y: yy,
              spatialReference: {
                wkid: 3857,
              },
            };
            pointAll = this.gisConstructor.webMercatorUtils.geographicToWebMercator(
              pointAll
            );
            var point1 = this.gisInstance.view.toScreen(
              new this.gisConstructor.Point(pointAll)
            );
            var { x, y } = point1;
            if (!div && typeof value == "string") {
              div = document.createElement("div");
              var div1 = document.createElement("div");
              var div2 = document.createElement("div");
              div2.className = "angle";
              div.id = "pop" + v.uid;
              div.className = "poptemplate";
              document.getElementById("viewDiv2").appendChild(div);
              div.appendChild(div1);
              div.appendChild(div2);
              div1.innerHTML = value;
            }
            if (div) {
              var height = div.offsetHeight;
              div.style = `left:${x - 140}px;top:${y - 32 - height}px`;
            }
          }
        });
      }
    },
    // initHome() {
    //   this.gcdd_sj = null;
    //   this.gcdd_qx = null;
    //   this.formField = {
    //     xmzt: [],
    //     lmlx: [],
    //     xzdj: []
    //   };
    //   this.isactive = 1;
    //   this.selectleap = [];
    //   // this.mapReady = true;
    // }
  },
  watch: {
    items(news) {
      if (news.length == 0) {
        var dom = document.querySelectorAll(".pulse");
        if (dom.length > 0) {
          dom.forEach((v) => {
            v.remove();
          });
        }
        var div = document.querySelectorAll(".poptemplate");
        if (div.length > 0) {
          div.forEach((v) => {
            v.remove();
          });
        }
      }
    },
    formField: {
      handler() {
        this.$nextTick(() => {
          this.search();
        });
      },
      deep: true,
    },
    selectleap: {
      handler() {
        this.$nextTick(() => {
          this.search();
        });
      },
      deep: true,
    },
  },
  computed: {
    ztz() {
      if (this.tableData.gsze > 10000) {
        return this.tableData.gsze / 10000
          ? (this.tableData.gsze / 10000).toFixed(2)
          : 0;
      } else {
        return this.tableData.gsze ? this.tableData.gsze.toFixed(2) : 0;
      }
    },
  },
};
</script>
<style lang="less">
.citylist {
  /*
    * 可以实现不异步加载点击单选
    * 
    */
  // .el-cascader-panel .el-radio {
  //   width: 100%;
  //   height: 100%;
  //   z-index: 10;
  //   position: absolute;
  //   top: 10px;
  //   right: 10px;
  //   display: hidden;
  // }
  // .el-cascader-panel .el-radio__input {
  //   visibility: hidden;
  // }
  // .el-cascader-panel .el-cascader-node__postfix {
  //   top: 10px;
  // }

  label.el-radio {
    display: none !important;
  }
  .el-icon-arrow-right.el-cascader-node__postfix {
    width: 10%;
    float: right;
  }
}

.map-home {
  .two {
    .el-progress-bar {
      padding-right: 150px;
      margin-right: -150px;
    }
    .el-progress__text {
      font-size: 16px !important;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(35, 138, 245, 1);
      margin-left: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .progress-green {
    .el-progress__text {
      font-size: 16px !important;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgb(37, 184, 61);
      margin-left: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .one {
    .el-progress__text {
      font-size: 30px;
      font-family: DINSchrift;
      font-weight: bold;
      color: rgba(0, 0, 0, 1);
    }
  }
}
</style>
<style lang="less" scoped>
.map-home {
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  margin: -20px;
  position: relative;
  overflow: hidden;
}
.select_screen {
  width: 100%;
  height: 50px;
  background: rgba(242, 243, 247, 1);
  span {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    margin: 0 10px;
  }
}
.viewDiv2 {
  width: 100%;
  height: calc(100% - 50px);
  // z-index: 10000;
  background: white;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.right_pop {
  position: absolute;
  top: 50px;
  right: 0;
  width: 450px;
  height: calc(100% - 40px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: -4px 0px 10px 0px rgba(0, 118, 189, 0.54);
  border-radius: 10px 0px 0px 0px;

  .top_ {
    width: 100%;
    height: 160px;
    position: relative;
    ._blue {
      width: 100%;
      height: 87px;
      background: rgba(35, 138, 245, 1);
      opacity: 0.9;
      border-radius: 10px 0px 0px 0px;
    }
    ._white {
      height: calc(100% - 87px);
      width: 100%;
    }
    ._center {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-209px, -52px);
      width: 418px;
      height: 104px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 9px 0px rgba(133, 72, 0, 0.26);
      border-radius: 10px;
      .data_tab {
        width: 33.33%;
        > div {
          text-align: center;
          &:first-child {
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: bold;
          }
          &:last-child {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
          }
        }
      }
    }
  }
  .tab {
    // width: 100%;
    height: 36px;
    background: rgba(242, 243, 247, 1);
    border-radius: 18px;
    margin: 0 12px;
    // flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: rgba(35, 138, 245, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 106px;
      height: 36px;
      cursor: pointer;
    }
    .active {
      width: 106px;
      height: 36px;
      background: rgba(35, 138, 245, 1);
      border-radius: 18px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: rgba(255, 255, 255, 1);
    }
  }
  .main-home {
    width: 100%;
    height: calc(100% - 200px);
    padding: 10px 20px;
    overflow-y: scroll;
    .title {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      > i {
        width: 16px;
        height: 8px;
        background: rgba(2, 154, 255, 1);
        border-radius: 4px;
        margin-right: 10px;
        cursor: pointer;
      }
      span {
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: rgba(2, 154, 255, 1);
        cursor: pointer;
      }
    }
    .main-charts {
      width: 100%;
      height: calc(100% - 30px);
      .lines {
        width: 100%;
        height: 70px;
        padding: 10px;
        .left-t {
          width: 30%;
          i {
            width: 11px;
            height: 41px;
            margin-right: 5px;
            img {
              width: 11px;
              height: 41px;
            }
          }
        }

        > span {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: rgba(107, 132, 147, 1);
        }
        .progress {
          width: 70%;
          float: right;
        }
      }
      .one {
        height: 50px;
      }
      .two {
        .left-t {
          width: 20%;
          span {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
          }
        }
        .progress {
          width: 80%;
        }
      }
    }
    .first-echart {
      width: 100%;
      height: 300px;
    }
    .second-echart {
      width: 100%;
      height: 300px;
    }
    .four-echart {
      height: 200px;
    }
    .three-echart {
      height: 200px;
      .one {
        // width: 33.33%;
        display: inline-block;
        position: relative;
        .a {
          top: 94px;
          left: 30px;
          position: absolute;
          width: 70px;
          height: 23px;
          background: rgba(35, 138, 245, 1);
          border-radius: 11px;
          font-size: 12px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: rgba(255, 255, 255, 1);
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .justy {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>